<!-- 柱状图 -->
<template>
  <div>
    <!-- <div class="title"><p>{{title}}</p></div> -->
    <div ref="barchart" :style="{ height: height, width: width }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: "日期趋势"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.barchart, "macarons");
    this.setOptions(this.chartData);
  },
  methods: {
    setOptions(chartData) {
      this.myChart.setOption({
        xAxis: {
          type: "category",
          data: chartData.xAxis
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#666", // 修改网格线颜色为浅灰色
              type: "dashed", // 添加虚线效果
              width: 1 // 线条宽度
            }
          }
        },
        tooltip: {
          trigger: "item",
					backgroundColor: '#fff',
          textStyle:{
              color:'#000'
            }
        },
        series: [
          {
            data: chartData.series,
            type: "bar",
            barWidth: 50,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" }
              ])
            }
          }
        ]
      });
      this.myChart.off("click");
      this.myChart.on("click", (params) => {
        this.$emit("barclick", params.name, this.title);
      });
    }
  }
};
</script>
<style scoped>
</style>